<!-- frontend/src/components/ModelSelector.vue -->
<template>
  <div class="card">
    <div
      v-for="(m, key) in modelList"
      :key="key"
      class="model-item"
      :class="{ active: key === current, 'medical-item': key === 'medical', 'supervision-item': key === 'supervision' }"
      @click="select(key as any)" 
    >
    <!-- 点击模型项时触发选择函数 -->
      <div class="model-name">
        <span v-if="key === 'medical'">🏥</span>
        <span v-if="key === 'supervision'">🔒</span>
        {{ m.name }}
      </div>
      <div v-if="key === 'medical'" class="medical-hint">
        点击进入影像分析
      </div>
      <div v-if="key === 'supervision'" class="supervision-hint">
        点击进入监管面板
      </div>
      <div v-else-if="key === 'codeaudit'" class="codeaudit-hint">
        打开代码审计工作台
      </div>
      <!-- <div style="font-size:12px; color:var(--sub)">{{ m.desc }}</div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { MODELS, type ModelKey } from '@/config/api';
import { useChatStore } from '@/stores/chat';
import { router } from '@/router';
const store = useChatStore();

const modelList = MODELS;
const current = computed(() => store.model);

function select(k: ModelKey){
  // 设置模型（这会自动更新currentModule）
  store.setModel(k);
  console.log('选择模型:', k);

  // 重置所有面板状态
  store.setShowMedicalPanel(false);
  store.setShowRegulationPanel(false);

  // 根据模型类型设置特定面板显示
  if (k === 'medical') {
    store.setShowMedicalPanel(true);
  } else if (k === 'supervision') {
    store.setShowRegulationPanel(true); // 直接设置为true，而不是切换
  }

  // 清空当前选择的会话ID，避免显示错误的消息
  store.setCurrentSession('');
  store.setMessages([]);

  // 刷新会话历史记录，获取当前模型对应模块的会话
  fetchSessionsForCurrentModule();
}

async function fetchSessionsForCurrentModule() {
  try {
    // 先清空会话列表，确保旧的会话记录会先消失
    store.setSessions([]);
    // 然后调用store的fetchSessions方法来获取新的会话列表
    await store.fetchSessions();
  } catch (error) {
    console.error('刷新会话历史记录失败:', error);
  }
}
</script>
<style scoped>
.model-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.model-item:hover {
  background: var(--primary);
  color: white;
}

/* .medical-item {
  border: 2px solid #10b981;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

.medical-item:hover {
  background: #10b981;
  color: white;
} */
 /* 修改医疗模型项样式，移除默认渐变背景 */
.medical-item {
  border: 1px solid var(--border); /* 使用全局边框变量，确保可见 */
  background: rgb(255, 255, 255); /* 背景保持白色 */
}
/* background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); */
/* 只有激活状态才显示特殊背景 */
.medical-item.active {
  border: 1px solid #33da0a;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.medical-item:hover {
  background: #10b981;
  color: white;
}

.codeaudit-item {
  border: 1px solid var(--border);
  background: rgb(255, 255, 255);
}

.codeaudit-item.active {
  border: 1px solid #2563eb;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.codeaudit-item:hover {
  background: #2563eb;
  color: white;
}

.model-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.medical-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.medical-item .medical-hint {
  color: #059669;
}

.medical-item:hover .medical-hint {
  color: white;
}

.supervision-item {
  border: 1px solid var(--border);
  background: #fff;
}

.supervision-item:hover,
.supervision-item.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.supervision-hint {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.supervision-item .supervision-hint {
  color: #6b7280;
}

.supervision-item:hover .supervision-hint,
.supervision-item.active .supervision-hint {
  color: white;
}

.codeaudit-hint {
  font-size: 12px;
  color: #4b5563;
  margin-top: 4px;
}

.codeaudit-item .codeaudit-hint {
  color: #059669;
}

.codeaudit-item:hover .codeaudit-hint {
  color: white;
}

</style>
